﻿
@using IOA.MES.DataAccess.VModel
@{
    ViewBag.Title = "新建发料单";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";

    var workshops = ViewBag.Workshops as List<VWorkshop>;
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid layui-form">
        <div class="layui-card">
            <div class="layui-card-header">新建发料单</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs4 layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.WorkShop">车间：</label>
                        <div class="layui-input-inline">
                            <select lay-filter="WorkshopCode" name="WorkshopCode">
                                <option value="">请选择</option>
                                @foreach (var item in workshops)
                                {
                                    <option value="@item.WorkshopCode">@item.WorkshopName</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.AssemblyLine">流水线：</label>
                        <div class="layui-input-inline">
                            <select lay-filter="LineId" name="LineId">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.WorkorderNo">工单号：</label>
                        <div class="layui-input-inline">
                            <select lay-filter="WorkOrderNo" name="WorkOrderNo" lay-search>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body layui-form">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">按托盘发料</li>
                        <li>按箱发料</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-block">
                                <label class="layui-form-label" v-html="lang.Field.BatchNoBig">托盘号：</label>
                                <div class="layui-input-block">
                                    <input lay-filter="BatchNoBig" name="BatchNoBig" class="layui-input" placeholder="请扫描托盘号" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-block">
                                <label class="layui-form-label" v-html="lang.Field.BatchNoSmall">箱号：</label>
                                <div class="layui-input-block">
                                    <input lay-filter="BatchNoSmall" name="BatchNoSmall" class="layui-input" placeholder="请扫描托盘号" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="table" lay-filter="table"></table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form-item" style="text-align:center;padding-top: 20px;">
                    <button class="layui-btn layui-btn-primary" type="button" onclick="parent.layui.admin.events.closeThisTabs();"><i class="layui-icon">&#xe616;</i>取消</button>
                    <button class="layui-btn layui-btn-normal" type="button" lay-submit lay-filter="submit"><i class="layui-icon">&#xe605;</i>确认发料</button>
                </div>
            </div>
        </div>
    </div>
</script>


@section Scripts{
    <script>
        var workshops = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(workshops));
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);

        function initLayui() {
            layui.use(['form', 'layer', 'index', 'laydate', 'table'], function () {
                var layer = layui.layer,
                    table = layui.table,
                    form = layui.form;

                var tableData = new Array();

                var options = {
                    elem: '#table'
                    , data: tableData
                    , page: false
                    , limit: 1000
                    , cols: [[
                        { type: 'numbers', title: '序号', fixed: 'left', width: 60, align: 'center' }
                        , { field: 'CategoryName', title: '物料分类', width: 100, align: 'center', fixed: 'left' }
                        , { field: 'ProductCode', title: '物料编码', align: 'center' }
                        , { field: 'ProductName', title: '物料名称', align: 'center' }
                        , { field: 'ProductionCompany', title: '生产厂家', align: 'center' }
                        , { field: 'BatchNo', title: '批次号', align: 'center' }
                        , { field: 'BatchNoBig', title: '托盘号', align: 'center' }
                        , { field: 'BatchNoSmall', title: '箱号', align: 'center' }
                        , { field: 'AllocateNo', title: '调拨单号', align: 'center' }
                        , { field: 'Specifications', title: '规格', align: 'center' }
                        , { field: 'Quantity', width: 100, fixed: 'right', title: '数量', align: 'center', style: 'color:red;', edit: 'number' }
                        , {
                            title: '操作', fixed: 'right', width: 100, templet: function (d) {
                                return '<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>';
                            }
                        }
                    ]]
                };
                table.render(options);
                table.on("tool(table)", function (obj) {
                    switch (obj.event) {
                        case "delete":
                            for (var i = tableData.length - 1; i >= 0; i--) {
                                if (tableData[i].PkId == obj.data.PkId) {
                                    tableData.splice(i, 1);
                                }
                            }
                            table.reload('table', {
                                data: tableData
                            });
                            break;
                    }
                });

                form.on('select(WorkshopCode)', function (data) {
                    tableData = [];
                    table.reload('table', {
                        data: tableData
                    });
                    var workshop = data.value == "" ? { Lines: [] } : workshops.find((e) => e.WorkshopCode == data.value);
                    var options = ["<option value='' selected>请选择</option>"];
                    for (var i = 0; i < workshop.Lines.length; i++) {
                        options.push("<option value='" + workshop.Lines[i].PkId + "'>" + workshop.Lines[i].LineName + "</option>");
                    }
                    $("select[name=LineId]").html(options.join(""));
                    form.render();
                    queryWorkOrders();
                });
                form.on('select(WorkOrderNo)', function (data) {
                    tableData = [];
                    table.reload('table', {
                        data: tableData
                    });
                });
                $("input[name=BatchNoBig]").keyup(function (e) {
                    if (e.keyCode == 13) {
                        queryWorkOrderAllocateProducts();
                    }
                });
                $("input[name=BatchNoSmall]").keyup(function (e) {
                    if (e.keyCode == 13) {
                        queryWorkOrderAllocateProducts();
                    }
                });

                form.on("submit(submit)", function (data) {
                    var model = data.field;
                    model.BillType = 1;
                    model.Items = layui.table.cache.table;
                    if (model.WorkshopCode == "") {
                        return layer.alert("请选择车间", { icon: 5 });
                    } else if (model.LineId <= 0) {
                        return layer.alert("请选择产线", { icon: 5 });
                    } else if (model.WorkOrderNo == "") {
                        return layer.alert("请选择工单", { icon: 5 });
                    } else if (model.Items.length <= 0) {
                        return layer.alert("请至少添加一个物料", { icon: 5 });
                    }

                    layer.confirm('确定要提交发料单吗？', function (index) {
                        layer.close(index);
                        var loadId = layer.load();
                        $.ajax({
                            url: "/WorkOrder/SaveLineMaterialBill",
                            type: "POST",
                            data: {
                                model: model
                            },
                            complete: function () {
                                layui.layer.close(loadId);
                            },
                            success: function (res) {
                                if (res.ErrCode != 200) {
                                    layui.layer.msg(res.ErrMsg, { icon: 5 });
                                    return;
                                }
                                parent.layui.layer.msg("发料成功！", { icon: 6 });
                            }
                        });
                    });
                });

                function queryWorkOrders() {
                    var loadId = layer.load();
                    $.ajax({
                        url: "/WorkOrder/QueryWorkshopWorkOrderNos",
                        type: "POST",
                        data: {
                            workshopCode: $("select[name=WorkshopCode]").val().trim()
                        },
                        complete: function () {
                            layui.layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layui.layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            var options = ["<option value=''>请选择</option>"];
                            for (var i = 0; i < res.Data.length; i++) {
                                options.push("<option value='" + res.Data[i] + "'>" + res.Data[i] + "</option>");
                            }
                            $("select[name=WorkOrderNo]").html(options.join(""));
                            $("input[name=BatchNoBig]").val("");
                            $("input[name=BatchNoSmall]").val("");
                            form.render();

                            tableData = [];
                            table.reload('table', {
                                data: tableData
                            });
                        }
                    });
                }

                function queryWorkOrderAllocateProducts() {
                    form.render();
                    var workOrderNo = $("select[name=WorkOrderNo]").val().trim(),
                        batchNoBig = $("input[name=BatchNoBig]").val().trim(),
                        batchNoSmall = $("input[name=BatchNoSmall]").val().trim();

                    $("input[name=BatchNoBig]").val("");
                    $("input[name=BatchNoSmall]").val("");

                    var loadId = layer.load();
                    $.ajax({
                        url: "/WorkOrder/QueryWorkOrderAllocateProducts",
                        type: "POST",
                        data: { workOrderNo, batchNoBig, batchNoSmall },
                        complete: function () {
                            layui.layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layui.layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            for (var i = 0; i < res.Data.length; i++) {
                                if (tableData.find((e) => e.PkId == res.Data[i].PkId) == null) {
                                    res.Data[i].AllocateProductId = res.Data[i].PkId;
                                    tableData.push(res.Data[i]);
                                }
                            }
                            table.reload('table', {
                                data: tableData
                            });
                        }
                    });
                }
            });
        }
    </script>
}
